<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/filter/DateFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript">
            var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
            var tlMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.producttimeline');
			var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var ctYesno = new i18nMessage('../../servlet/CodeTableServlet?name=CtYesno');
			
			var ctSeasonNumberXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtSeasonNumber');
			var ctVersionXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtVersion');
			var ctProductFamilyXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtProductFamily');
			var ctDesignTypeXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtDesignType');
			
            var timeLineStore;
            var timeLineGrid;
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
				
				timeLineStore = new Ext.data.Store({
                    url: '../../servlet/ProductTimeLineServlet?action=4',
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index','id', 'piId', {
					 	name: 'productIdentification.ctProductFamily',
					 	mapping: 'ctProductFamily'
					 }, {
					 	name: 'productIdentification.ctDesignType',
					 	mapping: 'ctDesignType'
					 },{
					 	name: 'productIdentification.ctSeasonNumber',
					 	mapping: 'ctSeasonNumber'
					 },{
					 	name: 'productIdentification.ctVersion',
					 	mapping: 'ctVersion'
					 },{
					 	name: 'productIdentification.orderNumber',
					 	mapping: 'orderNumber'
					 }, {
					 	name: 'productIdentification.reference',
					 	mapping: 'reference'
					 }, {
					 	name: 'productIdentification.patronageNumer',
					 	mapping: 'patronageNumer'
					 }, 'state','name', 'alarmTime', 'finishedTime', 'isEffective', 'isFinished', 'comment']),
                    remoteSort: true
                }); 
				var filters = new Ext.grid.GridFilters({
					  filters:[
						{type: 'string',  dataIndex: 'productIdentification.orderNumber'},
						{type: 'string',  dataIndex: 'productIdentification.patronageNumer'},
						{type: 'string',  dataIndex: 'productIdentification.reference'},
						{type: 'list',  dataIndex: 'productIdentification.ctSeasonNumber', options: ctSeasonNumberXmlLoader.getCtArray() },
						{type: 'list',  dataIndex: 'productIdentification.ctProductFamily', options: ctProductFamilyXmlLoader.getCtArray() },
						{type: 'list',  dataIndex: 'productIdentification.ctDesignType', options: ctDesignTypeXmlLoader.getCtArray() },
						{type: 'list',  dataIndex: 'productIdentification.ctVersion',options: ctVersionXmlLoader.getCtArray()},
						{type: 'string',  dataIndex: 'name'},
						{type: 'date',  dataIndex: 'finishedTime'},
						{type: 'date',  dataIndex: 'alarmTime'},
						{
						      type: 'list',  
						      dataIndex: 'isEffective', 
						      options: ctYesno.getCtArray()
					    },
						{
						      type: 'list',  
						      dataIndex: 'isFinished', 
						      options: ctYesno.getCtArray()
					    }
					]});
				timeLineGrid = new Ext.grid.GridPanel({
                    title: tlMessage.get('ui.producttimeline.listtitle'),
                    store: timeLineStore,
					stripeRows: true,
					plugins: filters,
                    height: 560,
                    columns: [{
                        header: message.get('message.list.id'),
                        width: 50,
                        dataIndex: 'index',
                        sortable: false
                    },{
                        header: tlMessage.get('ui.producttimeline.state'),
                        dataIndex: 'state',
						width: 60,
                        sortable: true,
						renderer: renderState
                    },{
                        header: message.get('message.edit.productfamily'),
                        dataIndex: 'productIdentification.ctProductFamily',
						width: 60,
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.designtype'),
                        dataIndex: 'productIdentification.ctDesignType',
                        sortable: true
                    },{
                        header: referenceMessage.get('ui.reference.reference'),
                        dataIndex: 'productIdentification.reference',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.seasonnumber'),
                        dataIndex: 'productIdentification.ctSeasonNumber',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.chartversion'),
                        dataIndex: 'productIdentification.ctVersion',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.patronagenumer'),
                        dataIndex: 'productIdentification.patronageNumer',
                        sortable: true
                    },{
                        header: piMessage.get('ui.productidentification.ordernumber'),
                        dataIndex: 'productIdentification.orderNumber',
                        sortable: true
                    }, {
                        header: tlMessage.get('ui.producttimeline.name'),
                        dataIndex: 'name',
                        sortable: true
                    }, {
                        header: tlMessage.get('ui.producttimeline.finishedtime') + "(d/m/Y)",
                        dataIndex: 'finishedTime',
                        sortable: true
                    }, {
                        header: tlMessage.get('ui.producttimeline.alerttime') + "(d/m/Y)",
                        dataIndex: 'alarmTime',
                        sortable: true
                    }, {
                        header: tlMessage.get('ui.producttimeline.iseffective'),
                        dataIndex: 'isEffective',
                        sortable: true,
						renderer: renderIsEffective
                    },{
                        header: tlMessage.get('ui.producttimeline.isfinished'),
                        dataIndex: 'isFinished',
                        sortable: true,
						renderer: renderIsFinished
                    },{
                        header: message.get('message.edit.output'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderReport
                    }],
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    renderTo: 'timeLineList',
                    bbar: new Ext.PagingToolbar({
                        pageSize: 20,
                        store: timeLineStore,
                        displayInfo: true
                    })
                });
				
				var startPage = getPrarmeterValue(window.location, 'startPage');
                var start;
                if (startPage == null || startPage == '') {
                    start = 0;
                }
                else {
                    start = (startPage - 1) * 20;
                }
				
				timeLineStore.load({
                    params: {
                        start: start,
                        limit: 20
                    }
                });
				
				var detailWin;
                timeLineGrid.on('rowdblclick', function(grid, rowIndex, e){
                    if (!detailWin) {
                        detailWin = new Ext.Window({
                            title: message.get('message.window.detail'),
                            layout: 'fit',
                            width: 650,
                            height: 420,
                            closeAction: 'hide',
                            plain: true,
                            items: [{
                                id: 'detailPanel',
                                region: 'center',
                                bodyStyle: {
                                    background: '#ffffff',
                                    padding: '7px'
                                },
                                html: message.get('message.window.empty')
                            }]
                        });
                    }
                    
                    detailWin.show(this);
                    var itemTplMarkup = [
						'<table cellspacing="0" id="the-table"><tbody>',
							'<tr><td style="background:#eeeeee;">',
							message.get('message.list.id'),
							'</td><td>{id}</td>',
							'<td style="background:#eeeeee;">',
							tlMessage.get('ui.producttimeline.state'),
							'</td><td>' + renderState(grid.getStore().getAt(rowIndex).data['state'])  + '</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.productfamily'),
							'</td><td>' + grid.getStore().getAt(rowIndex).data['productIdentification.ctProductFamily'] + '</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							piMessage.get('ui.productidentification.designtype'),
							'</td><td>' + grid.getStore().getAt(rowIndex).data['productIdentification.ctDesignType'] + '</td>',
							'<td style="background:#eeeeee;">',
							referenceMessage.get('ui.reference.reference'),
							'</td><td>' + grid.getStore().getAt(rowIndex).data['productIdentification.biReference.reference']  + '</td>',
							'<td style="background:#eeeeee;">',
							piMessage.get('ui.productidentification.ordernumber'),
							'</td><td>' + grid.getStore().getAt(rowIndex).data['productIdentification.orderNumber'] + '</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							tlMessage.get('ui.producttimeline.name'),
							'</td><td colspan="5">{name}</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							tlMessage.get('ui.producttimeline.finishedtime')+ '(d/m/Y)',
							'</td><td>{finishedTime}</td>',
							'<td style="background:#eeeeee;" >',
							tlMessage.get('ui.producttimeline.alerttime') + '(d/m/Y)',
							'</td><td colspan="3">{alarmTime}</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							tlMessage.get('ui.producttimeline.iseffective'),
							'</td><td>' + renderIsEffective(grid.getStore().getAt(rowIndex).data.isEffective) + '</td>',
							'<td style="background:#eeeeee;">',
							tlMessage.get('ui.producttimeline.isfinished'),
							'</td><td colspan="3">' + renderIsFinished(grid.getStore().getAt(rowIndex).data.isFinished) + '</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							tlMessage.get('ui.producttimeline.comment'),
							'</td><td colspan="5">{comment}</td></tr>',
							
						'</tbody></table>'
					
					
					];
                    var itemTpl = new Ext.Template(itemTplMarkup);
                    var detailPanel = Ext.getCmp('detailPanel');
                    itemTpl.overwrite(detailPanel.body, grid.getStore().getAt(rowIndex).data);
                });
				
            });
			
			function renderState(value, p, record, rowIndex){
				if(value == "1"){//STATE_INEFFECTIVE
					return String.format('<img ext:qtip="{0}" src="../../images/icons/flag_red.png" />', tlMessage.get('ui.producttimeline.state.ineffective'));
				}else if(value == "2"){// STATE_FINISHED
					return String.format('<img ext:qtip="{0}" src="../../images/icons/flag_green.png" />', tlMessage.get('ui.producttimeline.state.finished'));
				}else if(value == "5"){//STATE_ALARM
					return String.format('<img ext:qtip="{0}" src="../../images/icons/exclamation.png" />&nbsp;&nbsp;<img height="12" src="../../images/icons/e_mark.gif" />', tlMessage.get('ui.producttimeline.state.alarm'));					
				}else if(value == "3"){//STATE_ONGOING
					return String.format('<img ext:qtip="{0}" src="../../images/icons/flag_yellow.png" />', tlMessage.get('ui.producttimeline.state.ongoing'));
				}else if(value == "4"){//STATE_ABNORMAL
					return String.format('<img ext:qtip="{0}" src="../../images/icons/eye.png" />', tlMessage.get('ui.producttimeline.state.abnormal'));					
				}
			}
			
			function renderIsEffective(value, p, record){
				if(value == '01'){
					return String.format('<img ext:qtip="{0}" src="../../images/icons/tick.png" /></a>', message.get('message.list.yes'));		
				}else{
					return String.format('<img ext:qtip="{0}" src="../../images/icons/cross.png" /></a>', message.get('message.list.no'));				
				}
                    
            }
			
			function renderIsFinished(value, p, record){
                if(value == '01'){
					return String.format('<img ext:qtip="{0}" src="../../images/icons/tick.png" /></a>', message.get('message.list.yes'));		
				}else{
					return String.format('<img ext:qtip="{0}" src="../../images/icons/cross.png" /></a>', message.get('message.list.no'));				
				}
            }
			
			function renderReport(value, p, record){
				return String.format('<a href="product_identification_report.jsp?id={0}" target="_blank"><img src="../../images/icons/report.png" title="' + message.get('message.edit.output') + '" /></a>', record.data.piId);
			}
			
			var editCallback = function(){
				Ext.getCmp('alarmTime').reset();
				Ext.getCmp('finishedTime').reset();
				timeLineForm.getForm().load({
					url:'../../servlet/ProductTimeLineServlet?action=3&id=' + editId, 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
					}
				});
			}
        
        </script>
    </head>
    <body>
    		<div id="timeLineList"></div>
    </body>
</html>
